const STEP = 50
import { nextTick } from 'vue'
export function scrollToClassName(className: string, name: string) {
  if (!className) {
    throw new Error('请传入className')
  }
  const dom: HTMLElement = <HTMLElement>document.querySelector(className)
  // 获取目标的 offsetTop
  const targetOffsetTop: number = dom.offsetTop

  // 获取当前 offsetTop
  const scrollTop: number =
    document.documentElement.scrollTop || document.body.scrollTop

  if (scrollTop > targetOffsetTop) {
    // 往上滑
    smoothUp(scrollTop, targetOffsetTop, () => {
      startAnimation(name)
    })
    console.log('递归结束')
  } else {
    // 往下滑
    smoothDown(scrollTop, targetOffsetTop, () => {
      startAnimation(name)
    })
  }
}
// 定义向下滑
function smoothDown(
  scrollTop: number,
  targetOffsetTop: number,
  cb: Function = () => {}
) {
  // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
  if (scrollTop < targetOffsetTop) {
    // 如果和目标相差距离大于等于 STEP 就跳 STEP
    // 否则直接跳到目标点，目标是为了防止跳过了。
    if (targetOffsetTop - scrollTop >= STEP) {
      scrollTop += STEP
    } else {
      scrollTop = targetOffsetTop
      if (cb) cb()
    }
    document.body.scrollTop = scrollTop
    document.documentElement.scrollTop = scrollTop

    // 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高
    requestAnimationFrame(() => {
      console.log('开始 smoothDown 递归')
      smoothDown(scrollTop, targetOffsetTop)
    })
  }
}

// 定义向上滑
function smoothUp(
  scrollTop: number,
  targetOffsetTop: number,
  cb: Function = () => {}
) {
  if (scrollTop > targetOffsetTop) {
    if (scrollTop - targetOffsetTop >= STEP) {
      scrollTop -= STEP
      if (cb) cb()
    } else {
      scrollTop = targetOffsetTop
    }
    document.body.scrollTop = scrollTop
    document.documentElement.scrollTop = scrollTop
    requestAnimationFrame(() => {
      console.log('开始 smoothUp 递归')
      smoothUp(scrollTop, targetOffsetTop)
    })
  }
}

async function startAnimation(name: string) {
  const actives = emrActiveIndex[name as keyof typeof emrActiveIndex]
  await nextTick()
  function animationLoop(key: string) {
    const dom: HTMLElement = <HTMLElement>document.getElementById(key)
    const color = dom.style.color
    setTimeout(() => {
      dom.style.color = '#F56C6C'
    }, 1000)
    setTimeout(() => {
      dom.style.color = color
    }, 3000)
  }
  actives.forEach((item) => {
    animationLoop(item)
  })
}

export const emrScrollIndex = {
  control1: '2',
  control2: '4',
  control3: '2',
  control4: '3',
  bronchialAsthmaForm1: '8',
  bronchialAsthmaForm2: '8',
  bronchialAsthmaForm3: '8',
  bronchialAsthmaForm4: '8',
  bronchialAsthmaForm5: '8',
  bronchialAsthmaForm6: '8',
  bronchialAsthmaFormSA1: '10',
  bronchialAsthmaFormSA2: '10',
  bronchialAsthmaFormSA3: '10',
  bronchialAsthmaFormSA4: '10',
  bronchialAsthmaFormSA5: '10',
  bronchialAsthmaFormSA6: '10',
  bronchialAsthmaFormSA7: '10',
  bronchialAsthmaFormSA8: '11',
  bronchialAsthmaFormSA9: '10',
}

export const emrActiveIndex = {
  control1: ['attr19', 'attr20'],
  control2: ['attr44'],
  control3: ['attr21'],
  control4: ['attr38'],
  bronchialAsthmaForm1: ['attr154'],
  bronchialAsthmaForm2: ['attr149'],
  bronchialAsthmaForm3: ['attr238'],
  bronchialAsthmaForm4: ['attr143'],
  bronchialAsthmaForm5: ['attr237'],
  bronchialAsthmaForm6: ['attr191', 'attr192'],
  bronchialAsthmaFormSA1: ['attr161'],
  bronchialAsthmaFormSA2: ['attr162'],
  bronchialAsthmaFormSA3: ['attr238'],
  bronchialAsthmaFormSA4: ['attr154', 'attr155', 'attr156'],
  bronchialAsthmaFormSA5: ['attr159', 'attr160'],
  bronchialAsthmaFormSA6: ['attr191', 'attr192'],
  bronchialAsthmaFormSA7: ['attr194'],
  bronchialAsthmaFormSA8: ['attr225', 'attr226'],
  bronchialAsthmaFormSA9: ['attr149'],
}
